<%-- 
    Document   : mainboard
    Created on : 2016-2-19, 1:14:58
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>首页</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="reveal/reveal.css">	
        <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">

        <!-- http://amazeui.org/css/icon 这个框架也不错 好实用 -->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .big-link {color: #06f; }
        </style>
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="reveal/jquery.reveal.js"></script>
        <script src="guava.js"></script>
        <script type="text/javascript">
            var country_id = -1;
            var pinpai_id = -1;
            var country_name = "";
            var pinpai_name = "";
            var xilie_name = "";
            var pailiang_name = "";
            var nianfen_name = "";
            $(document).ready(function () {
                $('a[class=big-link]').click(function (e) {
                    //alert("on");
                    e.preventDefault();
                    var modalLocation = $(this).attr('data-reveal-id');
                    $('#' + modalLocation).reveal($(this).data());
                });
                var caryears = $("#caryears option");
                caryears.click(function () {
                    //alert($(this).val()+$(this).html());
                    //pinpai_id = $(this).val();
                    // $(hidden_input_name).val(pinpai_id);
                    $("#yearsstate").html("已选择 " + $(this).val() + "--" + $(this).html());
                    nianfen_name = $(this).html();
                    if (pailiang_name != "" && nianfen_name != "") {
                        //alert("can search");
                        getbaojia();
                    } else {
                        alert("前面还有没选择的参数，请按顺序选择");
                    }
                });
                $("#add_baojia_btn").click(function () {
                    //alert("what");
                    $.get("car/add_baojia", {country_name: country_name, pinpai_name: pinpai_name,
                        xilie_name: xilie_name, pailiang_name: pailiang_name, nianfen_name: nianfen_name, baojia: $("#baojia_id_input").val(), url: $("#baojia_URL_input").val()},
                            function (req) {
                                alert("添加成功");
                                location.reload();
                            });
                });
                $.get("car/get_country", null,
                        function (req) {
                            //成功时的回调方法
                            var opttt = "<option value''>请选择 </option>";
                            for (var i = 0; i < req.length; i++)
                            {
                                opttt = opttt + '<option value="' + req[i].id + '">' + req[i].countryname + '</option>';
                            }

                            $("#country_select").html(opttt);
                        });

            });
            function showpinpai(selectid, name) {
//                alert(name);
                country_name = name;
                $.get("car/get_pinpai", {country_id: selectid},
                        function (req) {
                            var opttt = "<option value''>请选择 </option>";
                            for (var i = 0; i < req.length; i++)
                            {
                                opttt = opttt + '<option value="' + req[i].id + '">' + req[i].pinpai + '</option>';

                            }
//                            alert(opttt);
                            //$("#pinpai_select").html(opttt);
                            $("#pinpai_select").html(opttt);

                        }
                );
            }
//            var now_url;
//            now_url = req[i].baojiaUrlInput;
//            window.location.href = now_url;
            function cartype(selectid, name) {
//                alert("s");
                pinpai_name = name;
                $.get("car/get_cartype", {farther_id: selectid},
                        function (req) {
                            var opttt = "<option value''>请选择 </option>";
                            for (var i = 0; i < req.length; i++)
                            {
                                opttt = opttt + '<option value="' + req[i].id + '" url="'+req[i].baojiaUrlInput+'">' + req[i].carType + '</option>';

                            }
//                            alert(opttt);
                            //$("#pinpai_select").html(opttt);
                            //alert(selectid+opttt);
                            $("#cartype_select").html(opttt);

                        }
                );
            }


            function pailiang3(selectid, name,url) {
                xilie_name = name;
                //console.log(url);
                window.location.href = url;
                $.get("car/get_pailiang", {farther_id: selectid},
                        function (req) {
                            var opttt = "<option value''>请选择 </option>";
                            for (var i = 0; i < req.length; i++)
                            {
                                opttt = opttt + '<option value="' + req[i].id + '">' + req[i].valueInput + '</option>';

                            }
//                            alert(opttt);
                            //$("#pinpai_select").html(opttt);
                            //alert(selectid+opttt);
                            $("#pailiang_select").html(opttt);
                        }
                );
            }
            function getbaojianow(selectid, name) {
                nianfen_name = name;
                if (pailiang_name != "" && nianfen_name != "") {
                    //alert("can search");
                    getbaojia3();
                } else {
                    alert("前面还有没选择的参数，请按顺序选择");
                }
            }

            function setpailiang(selectid, name) {
                pailiang_name = name;
            }


//var country_name = "";
//var pinpai_name = "";
//var xilie_name = "";
//var pailiang_name = "";
//var nianfen_name = "";

            function getbaojia3() {
                $.get("car/get_baojia", {country_name: country_name, pinpai_name: pinpai_name,
                    xilie_name: xilie_name, pailiang_name: pailiang_name, nianfen_name: nianfen_name},
                        function (req) {
                            var opttt = "";
                            for (var i = 0; i < req.length; i++)
                            {
                                opttt = opttt + '<h4>' + req[i].baojia + '元/年</h4><button type="button" onclick="javascrtpt:window.location.href=\'' + req[i].url + '\'">下一步</button>';

                            }
                            $("#baojia_select").html(opttt);
                            if (req.length == 0) {
                                //alert("no result");


                                $("#baojia_btn").click();
                            }

                        }
                );
            }


            $("#cartype_btn").click(function () {
                if ($("#country_id_input").val() == "") {
                    alert("请选择国家");
                }
            });
        </script>
    </head>
    <body>
        <div class="container">

            <div class="row">
                <div class="form-group">
                    <h3>延保价格评估：</h3>
                </div>
            </div>
            <div class="row form-horizontal" style="padding:0 20px;">
                <div class="form-group">
                    <label class="col-sm-5 col-xs-5 control-label">品牌所属国家：</label>
                    <div class="col-sm-5 col-xs-5">
                        <select name="country_select" id="country_select" onchange="showpinpai(this.options[this.options.selectedIndex].value, this.options[this.options.selectedIndex].innerHTML)">

                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-5 col-xs-5 control-label">爱车品牌：</label>
                    <div class="col-sm-5 col-xs-5">
                        <select name="pinpai_select" id="pinpai_select" onchange="cartype(this.options[this.options.selectedIndex].value, this.options[this.options.selectedIndex].innerHTML)">

                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-5 col-xs-5 control-label">所属系列</label>
                    <div class="col-sm-5 col-xs-5">
                        <select name="cartype_select" id="cartype_select" onchange="pailiang3(this.options[this.options.selectedIndex].value, this.options[this.options.selectedIndex].innerHTML,this.options[this.options.selectedIndex].getAttribute('url'))">

                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-5 col-xs-5 control-label">发动机排量</label>
                    <div class="col-sm-5 col-xs-5">
                        <select name="pailiang_select" id="pailiang_select"onchange="setpailiang(this.options[this.options.selectedIndex].value, this.options[this.options.selectedIndex].innerHTML)">

                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-5 col-xs-5 control-label">爱车年份</label>
                    <div class="col-sm-5 col-xs-5">
                        <select name="caryears" id="caryears" onchange="getbaojianow(this.options[this.options.selectedIndex].value, this.options[this.options.selectedIndex].innerHTML)">
                            <option value="">请选择</option>
                            <option value="1">三年车</option>
                            <option value="2">四年车</option>
                            <option value="3">五年车</option>
                            <option value="4">六年车</option>
                            <option value="5">七年车</option>
                            <option value="6">八年车</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-5 col-xs-5 control-label">优质保价格：</label>
                    <div class="col-sm-5 col-xs-5" id="baojia_select">

                    </div>
                </div>

            </div>




            <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
            <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
